/*
 * @Description: effect Hook
 * @Author: 姚泽毅
 * @Date: 2021-09-02 17:25:33
 * @LastEditTime: 2021-09-03 08:53:14
 */
import React from 'react'
import ReactDOM from 'react-dom'
const { useState, useEffect } = React
export default function Demo() {
    const [count, setCount] = useState(0)
    useEffect(() => {
        // console.log("1",count);
        let timer = setInterval(() => {
            // console.log("2",count);
            setCount(count => count + 1)
            // setCount(count + 1)
        }, 1000)
        return () => {
            clearInterval(timer)
        }
    }, [])
    function add() {
        console.log(count);
        // setCount(count + 1)
        setCount(count => count + 1)
    }
    function unmount() {
        ReactDOM.unmountComponentAtNode(document.getElementById("root"))
    }
    return (
        <div>
            <h2>当前求和为：{count}</h2>
            <button onClick={add}>点击加1</button>
            <button onClick={unmount}>卸载组件</button>
        </div>
    )
}

// export default function Demo() {
//     const [varA, setVarA] = useState(0);
//     const [varB, setVarB] = useState(0);

//     // useEffect(() => {
//     //     const timeout = setTimeout(() => setVarA(varA + 1), 500);
//     //     return () => clearTimeout(timeout);
//     // }, [varA]);

//     // useEffect(() => {
//     //     const timeout = setTimeout(() => setVarB(varB + 2), 2000);

//     //     return () => clearTimeout(timeout);
//     // }, [varB]);

//     // useEffect(() => {
//     //     const timeout = setTimeout(() => setVarB(varB => varB + 2), 2000);

//     //     return () => clearTimeout(timeout);
//     // }, [varB]);

//     // useEffect(() => {
//     //     // console.log("1",count);
//     //     let timer = setInterval(() => {
//     //         // console.log("2",count);
//     //         setVarB(varB => varB + 1)
//     //         // setCount(count + 1)
//     //     }, 1000)
//     //     return () => {
//     //         clearInterval(timer)
//     //     }
//     // }, [])

//     useEffect(() => {
//         const timeout = setInterval(() => {setVarB(varB => varB + 2)}, 1000);

//         return () => clearTimeout(timeout);
//     }, []);

//     return <span>{varA}, {varB}</span>;
// }